<div *ngIf="salesData" [nzGutter]="24" class="pt-lg" nz-row>
    <div nz-col nzLg="5" nzMd="12" nzSm="12" nzXs="24">
        <g2-card
                [action]="action1"
                [footer]="footer1"
                [title]="'app.analysis.total-sales' | translate"
                total="￥{{salesData.totalSales}}">
            <ng-template #action1>
                <nz-tooltip [nzTitle]="'app.analysis.introduce' | translate">
                    <i nz-icon nz-tooltip nzType="info-circle"></i>
                </nz-tooltip>
            </ng-template>
            <!--            <trend flag="up" style="display:block; margin-top:2px;">-->
            <!--                {{ 'app.analysis.week' | translate }}-->
            <!--                <span class="pl-sm">12%</span>-->
            <!--            </trend>-->
            <!--            <trend flag="down">-->
            <!--                {{ 'app.analysis.day' | translate }}-->
            <!--                <span class="pl-sm">11%</span>-->
            <!--            </trend>-->
            <ng-template #footer1>
                <p class="text-truncate mb0">
                    {{ 'app.analysis.day-sales' | translate }}
                    <span class="ml-sm">￥{{salesData.dailySales}}</span>
                </p>
            </ng-template>
        </g2-card>
    </div>
    <div nz-col nzLg="5" nzMd="12" nzSm="12" nzXs="24">
        <g2-card
                [action]="action2"
                [footer]="footer2"
                title="销售数量"
                total="{{salesData.totalSalesVolume}}">
            <ng-template #action2>
                <nz-tooltip [nzTitle]="'今日销售'">
                    <i nz-icon nz-tooltip nzType="info-circle"></i>
                </nz-tooltip>
            </ng-template>
            <g2-mini-area *ngIf="salesData.visitData" [data]="salesData.visitData" color="#975FE4"
                          height="46"></g2-mini-area>
            <ng-template #footer2>
                <p class="text-truncate mb0">
                    今日销售
                    <span class="ml-sm">{{salesData.dailySalesVolume}}</span>
                </p>
            </ng-template>
        </g2-card>
    </div>
    <div nz-col nzLg="5" nzMd="12" nzSm="12" nzXs="24">
        <g2-card
                [action]="action3"
                [footer]="footer3"
                [title]="'app.analysis.payments' | translate"
                total="{{salesData.totalPayCount}}"
        >
            <ng-template #action3>
                <nz-tooltip [nzTitle]="'app.analysis.introduce' | translate">
                    <i nz-icon nz-tooltip nzType="info-circle"></i>
                </nz-tooltip>
            </ng-template>
            <g2-mini-bar *ngIf="salesData.visitData" [data]="salesData.visitData" height="46"></g2-mini-bar>
            <ng-template #footer3>
                <p class="text-truncate mb0">
                    今日支付
                    <span class="ml-sm">{{salesData.dailyPayCount}}</span>
                </p>
            </ng-template>
        </g2-card>
    </div>
    <div *ngIf="deviceStatistics" nz-col nzLg="9" nzMd="12" nzSm="12" nzXs="24">
        <nz-card style="margin-bottom: 24px">
            <nz-row *ngIf="deviceStatistics" [nzGutter]="24"
                    nzAlign="middle"
                    nzJustify="start"
                    nzType="flex">
                <nz-col [nzSpan]="8"
                        class="row">
                    <nz-statistic [nzTitle]="'设备总数'"
                                  [nzValue]="deviceStatistics.deviceCount "></nz-statistic>
                </nz-col>
                <nz-col [nzSpan]="8"
                        class="row">
                    <div style="width:1px;height:auto;border-right:1px solid #ccc;float:right;margin-right:30px;"></div>
                    <nz-statistic [nzTitle]="title"
                                  [nzValue]="deviceStatistics.activeCount">
                        <ng-template #title>
                            <nz-badge nzStatus="success"
                                      nzText="激活设备"></nz-badge>
                        </ng-template>
                    </nz-statistic>

                </nz-col>

                <nz-col [nzSpan]="8"
                        class="row">
                    <div style="width:1px;height:auto;border-right:1px solid #ccc;float:right;margin-right:30px;"></div>
                    <nz-statistic [nzTitle]="onlineTitle"
                                  [nzValue]="deviceStatistics.onlineCount">
                        <ng-template #onlineTitle>
                            <nz-badge nzStatus="success"
                                      nzText="当前在线"></nz-badge>
                        </ng-template>
                    </nz-statistic>
                </nz-col>
            </nz-row>
        </nz-card>
        <!--        <g2-card-->
        <!--                [action]="action4"-->
        <!--                [footer]="footer4"-->
        <!--                [title]="'设备数'"-->
        <!--                [total]="deviceStatistics.deviceCount"-->
        <!--        >-->
        <!--            <ng-template #action4>-->
        <!--                <nz-tooltip [nzTitle]="'app.analysis.introduce' | translate">-->
        <!--                    <i nz-icon nz-tooltip nzType="info-circle"></i>-->
        <!--                </nz-tooltip>-->
        <!--            </ng-template>-->
        <!--&lt;!&ndash;            <g2-mini-progress color="#13C2C2" height="46" percent="78" strokeWidth="8" target="80"></g2-mini-progress>&ndash;&gt;-->
        <!--            <ng-template #footer4>-->
        <!--                <div class="d-flex justify-content-between text-truncate">-->
        <!--                    <trend flag="up">-->
        <!--                        {{ 'app.analysis.week' | translate }}-->
        <!--                        <span class="pl-sm">12%</span>-->
        <!--                    </trend>-->
        <!--                    <trend flag="down">-->
        <!--                        {{ 'app.analysis.day' | translate }}-->
        <!--                        <span class="pl-sm">11%</span>-->
        <!--                    </trend>-->
        <!--                </div>-->
        <!--            </ng-template>-->
        <!--        </g2-card>-->
    </div>
</div>
<nz-card *ngIf="monthlyData" [nzBordered]="false" class="sales-card" nzTitle="销量">
    <div nz-row>
        <div nz-col nzLg="16" nzMd="12" nzSm="24" nzXs="24">
            <div class="bar">
                <g2-bar
                        [data]="monthlyData"
                        [title]="'销售额趋势'"
                        height="295"
                        style="width: 100%"
                ></g2-bar>
            </div>
        </div>
        <div nz-col nzLg="8" nzMd="12" nzSm="24" nzXs="24">
            <div class="rank">
                <h4 class="ranking-title">门店销售排行</h4>
                <ul class="rank-list">
                    <li *ngFor="let i of rankingListData; let idx = index">
                        <span [ngClass]="{ active: idx < 3 }" class="number">{{ idx + 1 }}</span>
                        <span class="title">{{ i.storeName }}</span>
                        <span class="value">{{ i.sales }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--    <nz-tabset (nzSelectedIndexChange)="salesChange($event)"-->
    <!--               *ngIf="monthlyData">-->
    <!--        <nz-tab *ngFor="let tab of monthlyData" [nzTitle]="'app.analysis.' + tab.key | translate">-->

    <!--        </nz-tab>-->
    <!--&lt;!&ndash;        <ng-template #extraTemplate>&ndash;&gt;-->
    <!--&lt;!&ndash;            <div class="sales-extra-wrap">&ndash;&gt;-->
    <!--&lt;!&ndash;                <div class="sales-extra">&ndash;&gt;-->
    <!--&lt;!&ndash;                    <a (click)="setDate('today')">{{ 'app.analysis.all-day' | translate }}</a>&ndash;&gt;-->
    <!--&lt;!&ndash;                    <a (click)="setDate('week')">{{ 'app.analysis.all-week' | translate }}</a>&ndash;&gt;-->
    <!--&lt;!&ndash;                    <a (click)="setDate('month')">{{ 'app.analysis.all-month' | translate }}</a>&ndash;&gt;-->
    <!--&lt;!&ndash;                    <a (click)="setDate('year')">{{ 'app.analysis.all-year' | translate }}</a>&ndash;&gt;-->
    <!--&lt;!&ndash;                </div>&ndash;&gt;-->
    <!--&lt;!&ndash;                <nz-range-picker [(ngModel)]="date_range" style="display:inline-block; width: 256px;"></nz-range-picker>&ndash;&gt;-->
    <!--&lt;!&ndash;            </div>&ndash;&gt;-->
    <!--&lt;!&ndash;        </ng-template>&ndash;&gt;-->
    <!--    </nz-tabset>-->
</nz-card>
<!--<div [nzGutter]="24" nz-row>-->
<!--    <div nz-col nzLg="12" nzMd="24" nzSm="24" nzXs="24">-->
<!--        <nz-card-->
<!--                [nzBordered]="false"-->
<!--                [nzExtra]="extraOp"-->
<!--                [nzLoading]="loading"-->
<!--                [nzTitle]="'app.analysis.online-top-search' | translate"-->
<!--                class="mb-0"-->
<!--        >-->
<!--            <ng-template #extraOp>-->
<!--                <i [nzDropdownMenu]="extraOpMenu" class="icon-group" nz-dropdown nz-icon nzType="ellipsis"></i>-->
<!--                <nz-dropdown-menu #extraOpMenu="nzDropdownMenu">-->
<!--                    <ul nz-menu>-->
<!--                        <li nz-menu-item>操作一</li>-->
<!--                        <li nz-menu-item>操作二</li>-->
<!--                    </ul>-->
<!--                </nz-dropdown-menu>-->
<!--            </ng-template>-->
<!--            <div [nzGutter]="64" nz-row>-->
<!--                <div class="mb-md" nz-col nzSm="12" nzXs="24">-->
<!--                    <number-info [subTitle]="subTitle" status="up" subTotal="17.1" total="12,321">-->
<!--                        <ng-template #subTitle>-->
<!--                            {{ 'app.analysis.search-users' | translate }}-->
<!--                            <nz-tooltip [nzTitle]="'app.analysis.introduce' | translate">-->
<!--                                <i class="ml-sm" nz-icon nz-tooltip nzType="info-circle"></i>-->
<!--                            </nz-tooltip>-->
<!--                        </ng-template>-->
<!--                    </number-info>-->
<!--                    <g2-mini-area *ngIf="data.visitData2" [data]="data.visitData2" [line]="true"-->
<!--                                  height="45"></g2-mini-area>-->
<!--                </div>-->
<!--                <div class="mb-md" nz-col nzSm="12" nzXs="24">-->
<!--                    <number-info-->
<!--                            [subTitle]="'app.analysis.per-capita-search' | translate"-->
<!--                            status="down"-->
<!--                            subTotal="26.2"-->
<!--                            total="2.7"-->
<!--                    ></number-info>-->
<!--                    <g2-mini-area *ngIf="data.visitData2" [data]="data.visitData2" [line]="true"-->
<!--                                  height="45"></g2-mini-area>-->
<!--                </div>-->
<!--            </div>-->
<!--            <st [columns]="searchColumn" [data]="data.searchData" [page]="{ toTopInChange: false }" ps="5" size="small">-->
<!--                <ng-template let-i st-row="range">-->
<!--                    <trend [flag]="i.status === 1 ? 'down' : 'up'">-->
<!--                        <span>{{ i.range }}%</span>-->
<!--                    </trend>-->
<!--                </ng-template>-->
<!--            </st>-->
<!--        </nz-card>-->
<!--    </div>-->
<!--    <div nz-col nzLg="12" nzMd="24" nzSm="24" nzXs="24">-->
<!--        <nz-card-->
<!--                [nzBodyStyle]="{ 'padding.px': 24 }"-->
<!--                [nzBordered]="false"-->
<!--                [nzExtra]="extra"-->
<!--                [nzLoading]="loading"-->
<!--                [nzTitle]="'app.analysis.the-proportion-of-sales' | translate"-->
<!--                class="sales-card mb-0"-->
<!--                style="min-height: 502.5px"-->
<!--        >-->
<!--            <ng-template #extra>-->
<!--                <div class="sales-card-extra">-->
<!--                    <i-->
<!--                            [nzDropdownMenu]="salesExtraMenu"-->
<!--                            class="icon-group"-->
<!--                            nz-dropdown-->
<!--                            nz-icon-->
<!--                            nzPlacement="bottomLeft"-->
<!--                            nzType="ellipsis"-->
<!--                    ></i>-->
<!--                    <nz-dropdown-menu #salesExtraMenu="nzDropdownMenu">-->
<!--                        <ul nz-menu>-->
<!--                            <li nz-menu-item>操作一</li>-->
<!--                            <li nz-menu-item>操作二</li>-->
<!--                        </ul>-->
<!--                    </nz-dropdown-menu>-->
<!--                    <div class="sales-type-radio">-->
<!--                        <nz-radio-group (ngModelChange)="changeSaleType()" [(ngModel)]="salesType">-->
<!--                            <label [nzValue]="'all'" nz-radio-button>-->
<!--                                {{ 'app.analysis.channel.all' | translate }}-->
<!--                            </label>-->
<!--                            <label [nzValue]="'online'" nz-radio-button>-->
<!--                                {{ 'app.analysis.channel.online' | translate }}-->
<!--                            </label>-->
<!--                            <label [nzValue]="'offline'" nz-radio-button>-->
<!--                                {{ 'app.analysis.channel.stores' | translate }}-->
<!--                            </label>-->
<!--                        </nz-radio-group>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </ng-template>-->
<!--            <h4 class="margin:8px 0 32px 0;">{{ 'app.analysis.sales' | translate }}</h4>-->
<!--            <g2-pie-->
<!--                    *ngIf="salesPieData"-->
<!--                    [data]="salesPieData"-->
<!--                    [hasLegend]="true"-->
<!--                    [height]="248"-->
<!--                    [lineWidth]="4"-->
<!--                    [subTitle]="'app.analysis.sales' | translate"-->
<!--                    [total]="salesTotal"-->
<!--                    [valueFormat]="handlePieValueFormat"-->
<!--            >-->
<!--            </g2-pie>-->
<!--        </nz-card>-->
<!--    </div>-->
<!--</div>-->
<!--<nz-card [nzBodyStyle]="{ padding: '0 0 32px' }" [nzBordered]="false" [nzLoading]="loading" class="offline-card mt-lg">-->
<!--    <nz-tabset (nzSelectedIndexChange)="offlineChange($event)" *ngIf="data.offlineData"-->
<!--               [(nzSelectedIndex)]="offlineIdx">-->
<!--        <nz-tab *ngFor="let tab of data.offlineData; let i = index" [nzTitle]="nzTabHeading">-->
<!--            <ng-template #nzTabHeading>-->
<!--                <div [nzGutter]="8" nz-row style="width: 138px; margin: 8px 0;">-->
<!--                    <div [nzSpan]="12" nz-col>-->
<!--                        <number-info-->
<!--                                [subTitle]="'app.analysis.conversion-rate' | translate"-->
<!--                                [theme]="i !== offlineIdx && 'light'"-->
<!--                                [title]="tab.name"-->
<!--                                [total]="tab.cvr * 100 + '%'"-->
<!--                                gap="2"-->
<!--                        ></number-info>-->
<!--                    </div>-->
<!--                    <div [nzSpan]="12" nz-col style="padding-top: 36px;">-->
<!--                        <g2-pie-->
<!--                                [animate]="false"-->
<!--                                [color]="i !== offlineIdx && '#BDE4FF'"-->
<!--                                [height]="64"-->
<!--                                [inner]="0.55"-->
<!--                                [padding]="[0, 0, 0, 0]"-->
<!--                                [percent]="tab.cvr * 100"-->
<!--                                [tooltip]="false"-->
<!--                        >-->
<!--                        </g2-pie>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </ng-template>-->
<!--            <div class="px-lg">-->
<!--                <g2-timeline *ngIf="tab.show" [data]="tab.chart" [titleMap]="titleMap"></g2-timeline>-->
<!--            </div>-->
<!--        </nz-tab>-->
<!--    </nz-tabset>-->
<!--</nz-card>-->
